<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Form Demo: Color Picker</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function(){
			//Color
			var color 	 = $('#colorpicker').val();
				hexcolor = $('#hexcolor');

			hexcolor.html(color);

			$('#colorpicker').on('change', function() {
			    hexcolor.html(this.value);
			});
		});
	</script>
  </script>
</head>
<body>
<section id="forms">
	<h3>Color Picker</h3>
	<form action="color_form" method="get" accept-charset="utf-8" class="cf">
		<label for="color">Color</label> <input type="color" id="colorpicker" name="color" value="#ff0000"> <div id="hexcolor"></div>
	</form>
</section>
</body>
</html>